<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车</title>
  </head>
  <body>
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_4003170_znkaw5pgz09.css"
    />
    <link rel="stylesheet" href="../css/gouwuche.css" />
    <div class="big">
      <div class="small">
        <header>
          <img src="../images/酒仙.png" alt="" />
          <p></p>
          <span class="iconfont icon-fangdajing"></span>
        </header>
        <nav>
          <div><input class="qx" type="checkbox" />全选</div>
          <a href="">删除选中商品</a>
        </nav>
        <ul id="cart"></ul>
        <nav>
          <a class="a1" href="">结算</a>
          <span>￥</span>
        </nav>
      </div>
    </div>
    <script src="../js/01ajax.js"></script>
    <script>
      // 地址
      const baseUrl = "http://localhost:8888";
      // 获取ul标签
      let cart = document.getElementById("cart");
      ajax({
        url: baseUrl + "/cart/list",
        type: "get",
        params: { id: localStorage.getItem("uid") },
        author: true,
        fn(resData) {
          resData = JSON.parse(resData);
          if (resData.code == 0) {
            location.href = "02.登录.html";
          } else {
            // 获取商品信息
            let cartData = resData.cart;
            let html = "";
            cartData.forEach((o) => {
              html += `
              <div class="box">
            <input class="dx" type="checkbox"/>
            <img src="${o.img_small_logo}" alt="" />
            <p>${o.title}</p>
            <span style="margin: 20px 20px 0 0">￥ ${o.price}</span>
            <input type="text" value="${o.cart_number}" class="num" data-id="${
                o.goods_id
              }" />
            <section><b class="iconfont icon-jiahao"data-id="${
              o.goods_id
            }"></b><b class="iconfont icon-jianhao"></b></section>
            <a class="del" data-id="${o.goods_id}" href="">移出购物车</a>
            <span style="width:16px;margin:20px 0 0 20px">￥</span>
            <span id="zongjia" style="margin: 20px 0 0 0">${
              o.price * o.cart_number
            }</span>
          </div>
                `;
            });
            cart.innerHTML = html;

            // 获取删除标签
            let del = document.querySelectorAll(".del");
            del.forEach((ele) => {
              ele.onclick = () => {
                ajax({
                  url: baseUrl + "/cart/remove",
                  type: "get",
                  author: true,
                  params: {
                    id: localStorage.getItem("uid"),
                    goodsId: ele.getAttribute("data-id"),
                  },
                  fn(resData) {
                    if (JSON.parse(resData).code == 1) {
                      //ele.parentNode.remove();
                      location.reload();
                    }
                  },
                });
              };
            });

            // 获取input标签
            let num = document.querySelectorAll("input");
            num.forEach((ele) => {
              ele.onblur = () => {
                ajax({
                  url: baseUrl + "/cart/number",
                  type: "post",
                  params: {
                    id: localStorage.getItem("uid"),
                    goodsId: ele.getAttribute("data-id"),
                    number: ele.value,
                  },
                  author: true,
                  fn(resData) {
                    if (JSON.parse(resData).code == 1) {
                      location.reload();
                    }
                  },
                });
              };
            });
            // 加加和减减
            let ojia = document.querySelectorAll(".icon-jiahao");
            let ojian = document.querySelectorAll(".icon-jianhao");
            ojia.forEach((ele) => {
              ele.onclick = () => {
                let id = ele.getAttribute("data-id");
                ajax({
                  url: baseUrl + "/cart/number",
                  type: "post",
                  params: {
                    id: localStorage.getItem("uid"),
                    goodsId: id,
                    number: +1,
                  },
                  author: true, // 验证请求头。
                  fn(resData) {
                    resData = JSON.parse(resData);
                    console.log(resData);
                    //
                    ajax({
                      url: baseUrl + "/goods/item",
                      type: "get",
                      params: { id },
                      fn(resData) {
                        resData = JSON.parse(resData);
                        console.log(resData);
                      },
                    });
                    //
                  },
                });
              };
            });
            // 多选框
            let qx = document.querySelector(".qx");
            let dx = document.querySelectorAll(".dx");
            // 多选
            qx.onclick = function () {
              dx.forEach((o) => {
                if (qx.checked == true) {
                  o.checked = qx.checked;
                } else {
                  o.checked = qx.checked;
                }
              });
            };
            // 单选
            for (let i = 0; i < dx.length; i++) {
              dx[i].onclick = function () {
                let ched = document.querySelectorAll(".dx:checked");
                if (ched.length == dx.length) {
                  qx.checked = true;
                } else {
                  qx.checked = false;
                }
              };
            }
          }
        },
      });
    </script>
  </body>
</html>
